<template>
    <div style="height: 89%;overflow-y: auto;">
        <to-pou :params="params" :user="user"></to-pou>
        <!-- <top-ji :user="user"></top-ji> -->
        <div class="home_head" style="margin-top: 20px;">
            <div class="home_head_image">
                <img  src="../static/img/78.png" mode="" />
            </div>
            <div class="home_title" >
                <div>PLAY</div>
                <div style="font-weight: 900;color: #00354C;font-family: 'Neufreit';">$DAWG JUMP</div>
                <div>WIN</div>
                <div>AIRDROP</div>
            </div>
        </div>
	    <div style="padding: 0 14px;">
       	 <div style="margin-top: 15px;width: 100%;font-family: 'Regular'; color: #000;" class="sbumit_bnt" size="default" type="default" hover-class="is-hover" @click="signInHandel">Play now</div>

		</div>
        <ktrenwu @seebnt="seebnt" :list="list"></ktrenwu>
    </div>
</template>

<script>
import ToPou from './personInforma.vue'
import TopJi from './TopJi.vue';
import Ktrenwu from './Ktrenwu.vue';
export default {
    components: {
        ToPou,
        TopJi,
        Ktrenwu
    },
    props: {
        user: {
            type: [Object , String],
            default: () => { }
        },
        list: {
            type: Array,
            default:() => []
		},
		 params: {
			type: [Object, String],
			default: () => { }
		},
    },
    data() {
        return {

        }
    },
    methods: {
        signInHandel() {
            this.$emit('gameIndex',1)
        },
        seebnt() {
            this.$emit('seebnt',4)
        }
    }
}
</script>

<style lang="scss" scoped>
.sbumit_bnt{
		width: calc(100% - 30px);
		height: 54px;
		line-height: 54px;
		background: rgba(193, 227, 255, 1);
		font-family: Inter;
		font-size: 17px;
		font-weight: 600;
		text-align: center;
		border-radius: 10px;
	}
.home_head{
		width: calc(100% - 38px);
		height: 126px;
		background: linear-gradient(to top,#C1E3FF,#8ABCE4);
		margin: 0 auto;
		border-radius: 10px;
		border: 4px solid #fff;
		display: flex;
		justify-content: flex-end;
		justify-items: end;
		position: relative;
		overflow: hidden;
		.home_title{
			width: 70%;
			height: 100%;
			text-align: center;
			div:first-child{
				font-family: Neufreit;
				font-size: 16px;
				font-weight: 800;
				line-height: 20px;
				text-align: center;
				margin-top: 11px;
				color: #000;
			}
			div:nth-child(2){
				font-family: Neufreit;
				font-size: 26px;
				font-weight: 800;
				line-height: 30px;
				text-align: center;
				color: rgba(0, 53, 76, 1);

			}
			div:nth-child(3){
				font-family: Neufreit;
				font-size: 16px;
				font-weight: 800;
				line-height: 20px;
				color: #000;
			}
			div:last-child{
				font-family: Neufreit;
				font-size: 30px;
				font-weight: 800;
				line-height: 35px;
				background: linear-gradient(89.65deg, #987900 6.09%, #FFCB00 30.46%, #C9A000 40.01%, #FFCB00 50.05%, #C09900 55.3%, #EEBE00 74.42%, #B99300 82.42%, #534200 101.66%);
				-webkit-background-clip: text; /* Chrome, Safari */
				background-clip: text;
				-webkit-text-fill-color: transparent; /* Chrome, Safari */
				color: transparent; /* Overrides the color property */

			}
		}
		.home_head_image{
			width: 160px;
			height: 144px;
			position: absolute;
			bottom: -22px;
			left: 15px;
			img{
				width: 147px;
				height: 120px;
				background-size: cover;
				background-repeat: no-repeat;
			}
		}
    }

</style>